<template>
  <div class="bar-chart" :id="id">
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      default: 'barChart5'
    },
    isDarkTheme: {
      type: Boolean,
      default: false
    },
    barChartData: {
      type: Object,
      default: () => {
        return {
          legendData: [],
          xData: [],
          yData1: [],
          yData2: [],
          yData3: [],
          yData4: [],
          yData5: [],
        }
      }
    }
  },
  data() {
    return {
      barChart: null,
      colorList: {
        color1: ['rgba(20, 148, 251, 1)', 'rgba(4, 43, 120, 0)'],
        color2: ['rgba(0, 206, 234, 1)', 'rgba(0, 116, 132, 0.1)'],
        color3: ['rgba(255, 201, 122, 1)', 'rgba(255, 201, 122, 0.1)'],
        color4: ['rgba(208, 222, 238, 1)', 'rgba(208, 222, 238, 0.1)'],
        color5: ['rgba(20, 148, 251, 1)', 'rgba(4, 43, 120, 0)'],
      }
    }
  },
  watch: {
    barChartData: {
      deep: true,
      handler(val) {
       this.$nextTick( () => {
        this.initBarChart();
       })
      },
      immediate: true
    }
  },
  mounted() {
    // this.initBarChart();
  },
  methods: {
    initBarChart() {
      this.barChart = this.$echarts.init(document.getElementById(this.id));
      window.addEventListener('resize', () => {
        this.barChart.resize();
      });
      let barSeries = [];
      barSeries.push({
        // name: '处理单量',
        name: this.barChartData.legendData[0],
        type: 'bar',
        stack: "Ad",
        yAxisIndex: 0,
        barWidth: 15,
        animationDuration: 1000,
        animationEasing: 'quadraticIn', // 'cubicInOut', 'linear', 'quadraticIn', 'quadraticOut'
        itemStyle: {
          color: new this.$echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: 'rgba(20, 148, 251, 1)' }, // 渐变起始颜色  
              { offset: 0.5, color: 'rgba(14, 109, 203, 0.63)' }, // 渐变结束颜色
              { offset: 1, color: 'rgba(4, 43, 120, 0)' } // 渐变结束颜色
            ]
          )
        },
        data: this.barChartData.yData1
      })

      for (let i = 2; i <= 4; i++) {
        if (this.barChartData['yData' + i]) {
          barSeries.push({
            type: 'bar',
            stack: "Ad",
            yAxisIndex: 0,
            barWidth: 15,
            name: this.barChartData.legendData[i - 1],
            animationDuration: 1000,
            animationEasing: 'quadraticIn', // 'cubicInOut', 'linear', 'quadraticIn', 'quadraticOut'
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: this.colorList['color' + i][0] }, // 渐变起始颜色
                  { offset: 1, color: this.colorList['color' + i][1] } // 渐变结束颜色
                ]
              )
            },
            data: this.barChartData['yData' + i],
          })
        }
      }
      const className = this.isDarkTheme ? 'custom-tooltip-dark' : 'custom-tooltip-light';
      const option = {
        title: {
          // text: '柱状图示例'
        },
        legend: {
          top: '0%',
          textStyle: {
            color: '#fff'
          },
          data: this.barChartData.legendData,
        },
        tooltip: {
          trigger: 'axis',
          className: "custom-tooltip",
          formatter: (params) => {
            // console.log(params);
            // return params[0].name + '<br>' +
            //   params[0].seriesName + ': ' + params[0].value + '个' + '<br>' +
            //   params[1].seriesName + ': ' + params[1].value + '%';

          // 创建基础HTML结构
            let html = `
              <div class="${className}">
                <div class="title-box">
                  <div class="img-box"></div>
                  <span>${params[0].name}</span>
                </div>
                <div class="content-box">
                  <div class="left-box">
                    <div class="icon-box1"></div>
                    <span> ${params[0].seriesName + '  '} </span> 
                  </div>
                  <div>
                    <span class="orderNum1"> ${params[0].value} </span><span class="unit">单</span>
                  </div>
                </div>
            `;
            
            // 使用JavaScript条件判断代替v-show/v-if
            if (params.length > 1) {
              html += `
                <div class="content-box">
                  <div class="left-box">
                    <div class="icon-box2"></div>
                    <span> ${params[1].seriesName + '  '} </span> 
                  </div>
                  <div>
                    <span class="orderNum1"> ${params[1].value} </span><span class="unit">单</span>
                  </div>
                </div>
              `;
            }
            
            if (params.length > 2) {
              html += `
                <div class="content-box">
                  <div class="left-box">
                    <div class="icon-box3"></div>
                    <span> ${params[2].seriesName + '  '} </span> 
                  </div>
                  <div>
                    <span class="orderNum1"> ${params[2].value} </span><span class="unit">单</span>
                  </div>
                </div>
              `;
            }
            
            if (params.length > 3) {
              html += `
                <div class="content-box">
                  <div class="left-box">
                    <div class="icon-box4"></div>
                    <span> ${params[3].seriesName + '  '} </span> 
                  </div>
                  <div>
                    <span class="orderNum2"> ${params[3].value} </span><span class="unit">单</span>
                  </div>
                </div>
              `;
            }
            
            if (params.length > 4) {
              html += `
                <div class="content-box">
                  <div class="left-box">
                    <div class="icon-box5"></div>
                    <span> ${params[4].seriesName + '  '} </span> 
                  </div>
                  <div>
                    <span class="ratioNum"> ${params[4].value} </span><span class="unit">%</span>
                  </div>
                </div>
              `;
            }
            
            // 关闭HTML结构
            html += `</div>`;
            return html;
          }
        },
        grid: {
          left: '5%',
          right: '5%',
          top: '10%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          axisLabel: {
            color: "#fff",
          },
          axisLine: {
            show: true,
            color: '#fff',
          },
          axisTick: {
            show: false,
          },
          data: this.barChartData.xData,
        },
        yAxis: [
          {
            type: 'value',
            // name: '处理单量及通过率',
            position: "left",
            nameTextStyle: {
              // padding: 10
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#fff' // 设置y轴线的颜色为红色
              }
            },
            axisLabel: {
              show: true,
              color: "#fff",
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#fff',
                type: 'dashed'
              }
            },
          },
          {
            type: 'value',
            // name: '总体通过率',
            position: "right",
            axisLine: {
              show: false,
              lineStyle: {
                color: '#fff' // 设置y轴线的颜色为红色
              }
            },
            alignTicks: true, // 对齐两个Y轴的刻度
            axisLabel: {
              show: true,
              color: "#fff",
              formatter: '{value} %',
            },
            nameTextStyle: {
              // padding: 10
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#fff',
                type: 'dashed'
              }
            },
          }
        ],
        series: [
          ...barSeries,
          {
            name: this.barChartData.legendData[4],
            type: 'line',
            show: this.barChartData.yData5?.length > 0,
            yAxisIndex: 1,
            symbol: 'circle',
            symbolSize: 1,
            animationDuration: 1000,
            animationEasing: 'quadraticIn', // 'cubicInOut', 'linear', 'quadraticIn', 'quadraticOut'
            color: '#F1BD73',
            emphasis: { // 鼠标移入光晕效果
              itemStyle: {
                color: '#fff', // 将颜色设置为透明，以便看到光晕效果
                symbol: 'circle',
                symbolSize: 10,
                borderColor: 'rgba(241, 189, 115, 0.3)', // 光晕的边框颜色
                borderWidth: 14, // 光晕的边框宽度
                shadowBlur: 30, // 光晕的模糊大小
                shadowColor: 'rgba(241, 189, 115, 0.36)' // 光晕的颜色
              }
            },
            data: this.barChartData.yData5
          }
        ]
      }
      this.barChart.setOption(option);
    },
    beforeDestroy() {
      this.barChart.clear()
    },
  },
  
}
</script>

<style lang="scss" scoped>
.bar-chart {
  height: 240px;
  width: 100%;
  box-sizing: border-box;
}
::v-deep .custom-tooltip {
  // width: 200px;
  // height: 180px;
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
  // background: url("../css/detailTooltipBg-dark.png") no-repeat;
  // background-size: 100% 100%;
  .custom-tooltip-dark {
    width: 200px;
    height: 180px;
    color: #fff;
    font-size: 16px;
    padding: 10px;
    border-radius: 5px;
    background: url("../css/tootipBG-dark.png") no-repeat;
    background-size: 100% 100%;

    .title-box {
      display: flex;
      align-items: center;
      .img-box {
        height: 30px;
        width: 40px;
        background: url("../css/title-dark.png") no-repeat;
        background-size: 100% 100%;
      }
    }
    .content-box {
      height: 30px;
      padding: 0 0 0 8px;
      display: flex;
      flex-direction: row;
      align-items: baseline;
      justify-content: space-between;
      
      .left-box {
        display: flex;
        align-items: center;
      }
      .icon-box1, .icon-box2, .icon-box3, .icon-box4 {
        height: 15px;
        width: 15px;
        margin: 0 10px 0 0;
      }
      .icon-box1 {
        background: url("../css/tooltipIcon-dark1.png") no-repeat;
        background-size: 100% 100%;
      }
      
      .icon-box2 {
        background: url("../css/tooltipIcon-dark2.png") no-repeat;
        background-size: 100% 100%;
      }
      .icon-box3 {
        background: url("../css/tooltipIcon-dark3.png") no-repeat;
        background-size: 100% 100%;
      }
      .icon-box4 {
        background: url("../css/tooltipIcon-dark4.png") no-repeat;
        background-size: 100% 100%;
      }
      .icon-box5 {
        background: url("../css/ratio-dark.png") no-repeat;
        background-size: 100% 100%;
      }
    }
    .orderNum {
      font-family: "TCloudNumber";
      font-size: 20px;
      letter-spacing: 0.8px;
      background: linear-gradient(180deg, #FFF 51.85%, #53B5FD 83.33%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .orderNum1 {
      font-family: "TCloudNumber";
      font-size: 20px;
      letter-spacing: 0.8px;
      background: linear-gradient(180deg, #FFF 51.85%, #53B5FD 83.33%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .orderNum2 {
      font-family: "TCloudNumber";
      font-size: 20px;
      letter-spacing: 0.8px;
      background: linear-gradient(180deg, #FFF 51.85%, #F1BD73 83.33%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .unit {
      font-size: 14px;
    }
  }
}
  
</style>

